<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Interests of Aalto People</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <script type="text/javascript" src="js/vendor/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jQSparql.js"></script>
    <script type="text/javascript" src="js/d3.js"></script>
    <script type="text/javascript" src="js/d3.layout.cloud.js"></script>
    <!-- CSS -->
    <style type="text/css">

      /* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 98%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
      }
      
      .container {
    width:98%;
    position:absolute;              
    min-height:98%; !important /* browser fill */
    height:98%;
	  }

#title {
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
	position: absolute;
    top: 10px;
    left: 20px;
	z-index:1;
	-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}

.link {
  stroke: #000;
  stroke-width: 1.5px;
}

.node {
  fill: #99CCFF;
  stroke: #000;
  stroke-width: 1px;
    cursor: none;
}

.selected {
    
}

.text {
  fill: #ffffff;
  stroke: #ffffff;
  pointer-events: none;
  font-family: sans-serif;
}

.dep {
 fill: #FC425A;   
}

.main {
 fill: #0071C1;   
}

.ppl {
  fill: #FED40C;
}

.tip {
  color:white;
  font-size: 18px;
  font-weight: bold;
  background-color:rgba(1,174,204,1);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  position: relative;
 font-family: sans-serif;
}

/* arrows - :before and :after */
.tip:before {
  position: absolute;
  display: inline-block;
  border-top: 5px solid transparent;
  border-right: 5px solid #eee;
  border-bottom: 5px solid transparent;
  border-right-color: rgba(1,174,204,1);
  left: -5px;
  content: '';
}
​

  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){

var endpoint = "http://data.aalto.fi/sparql";
var sparql = new jQSparql();
sparql.addPrefix("aiiso","http://purl.org/vocab/aiiso/schema#");
var prefix = sparql.prefix();

var keys = [];
var fill = d3.scale.category20();

var width = $("#svg").width()-20,
    height = $("#svg").height()-20;
        
sparql.query(endpoint, prefix+"SELECT DISTINCT ?keyword WHERE { ?key skos:prefLabel ?keyword . FILTER(lang(?keyword) = 'en' ) }").done(function(data) {
                  
    for(i in data.results.bindings) {
	keys.push(data.results.bindings[i].keyword.value);
   
    }
    console.log(keys);
    
  d3.layout.cloud().size([width-10, height-10])
      .words(keys.map(function(d) {
        return {text: d, size: 5 + Math.random() * 15};
      }))
      .rotate(function() { return ~~(Math.random() * 3) * 10; })
      .font("Impact")
      .fontSize(function(d) { return d.size; })
      .on("end", draw)
      .start();

  function draw(words) {
    d3.select("#svg").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate("+width/2+","+height/2+")")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("font-family", "Impact")
        .style("fill", function(d, i) { return fill(i); })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
  }
    
    
    
});


});//]]>  

</script>
  
<body>
	<div id="wrap">
      <div id="title"><h3></h3></div>
      <div id="svg" class="container"></div>
   </div>
</body>
</html>
